{extend name="layout:base" /}
{block name="page_style"}
  <link href="{$site_root}/static/blonkon1.0.4/global/plugins/bower_components/bootstrap-datepicker-vitalets/css/datepicker.css" rel="stylesheet">
  <link href="{$site_root}/static/plugins/shearphoto/shearphoto_common/css/ShearPhoto.css" rel="stylesheet" type="text/css" media="all">
{/block}
{block name="main_content"}
  <div class="panel panel-tab rounded shadow">
    <!-- Start tabs heading -->
    <div class="panel-heading no-padding">
      <ul class="nav nav-tabs" id="topNavTab">
        <li>
          <a class="page-nav" href="{:url('update')}">
            <i class="fa fa-user-secret"></i>
            <div>
              <span class="text-strong">个人资料</span>
            </div>
          </a>
        </li>
        <li class="active">
          <a class="page-nav" href="#tab1-1" data-toggle="tab">
            <i class="fa fa-lock"></i>
            <div>
              <span class="text-strong">修改密码</span>
            </div>
          </a>
        </li>
        <li class="hidden-xs">
          <a class="page-nav" href="{:url('change_avatar')}">
            <i class="fa fa-camera"></i>
            <div>
              <span class="text-strong">头像修改</span>
            </div>
          </a>
        </li>
      </ul>
    </div><!-- /.panel-heading -->
    <!--/ End tabs heading -->

    <!-- Start tabs content -->
    <div class="panel-body">
      <div class="tab-pane fade in active inner-all" id="tab1-1">
        <div class="row">
          {notempty name="notice"}
            <div class="col-xs-12">
              <div class="alert alert-success">
                {$notice}
              </div>
            </div>
          {/notempty}
          <div class="col-xs-12">
            <form id="model-form" method="post" action="" class="form-horizontal form-bordered">
              <div class="form-body">
                <div class="form-group">
                  <label class="col-sm-3 col-xs-4 control-label">
                    旧密码：
                  </label>
                  <div class="col-sm-6 col-xs-8">
                    <input type="password" id="old_password" name="old_password" placeholder="请输入您的登录密码" class="form-control" value="" maxlength="20" autocomplete="off"/>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group">
                  <label class="col-sm-3 col-xs-4 control-label">
                    新密码：
                  </label>
                  <div class="col-sm-6 col-xs-8">
                    <input type="password" id="password" name="password" placeholder="请输入新登录密码" class="form-control" value="" maxlength="20" autocomplete="off"/>
                  </div>
                </div><!-- /.form-group -->
                <div class="form-group">
                  <label class="col-sm-3 col-xs-4 control-label">
                    确认密码：
                  </label>
                  <div class="col-sm-6 col-xs-8">
                    <input type="password" id="confirm_password" name="confirm_password" placeholder="再次输入新登录密码" class="form-control" value="" maxlength="20" autocomplete="off"/>
                  </div>
                </div><!-- /.form-group -->
              </div><!-- /.form-body -->
              <div class="form-footer">
                <div class="text-center">
                  <button class="btn btn-success mr-5" type="submit">保存</button>
                  <a href="" class="btn btn-danger">取消</a>
                </div>
                <div class="clearfix"></div>
              </div><!-- /.form-footer -->
            </form>
          </div>
        </div>
      </div>
    </div><!-- /.panel-body -->
    <!--/ End tabs content -->
    <!--/ End pager -->
  </div><!-- /.panel -->
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/plugins/jquery-validate/jquery.validate.min.js"></script>
  <!--设置和处理对象方法的JS文件，要修改设置，请进入这个文件-->
  <script type="text/javascript">
    var $form = $("form#model-form");
    var validator = $form.validate({
      ignore: "",
      rules:{
        "old_password":{
          required: true,
          remote: {
            url: "{:url('ajax_valid_password')}",
            type: "post"
          }
        },"password":{
          required: true,
          minlength: 6,
          maxlength: 20
        },"confirm_password":{
          required: true,
          equalTo: "#password"
        }
      },
      messages:{
        "old_password":{
          required: "请输入您的登录密码",
          remote: "请的登录密码不正确"
        },"password":{
          required: "请输入新登录密码",
          minlength: "登录密码长度必须在6-20之间",
          maxlength: "登录密码长度必须在6-20之间"
        },"confirm_password":{
          required: "请再次输入新登录密码",
          equalTo: "两次输入的密码不一致"
        }
      },
      highlight:function(element) {
        $(element).parents('.form-group').addClass('has-error has-feedback');
      },
      unhighlight: function(element) {
        $(element).parents('.form-group').removeClass('has-error');
      },
      submitHandler: function(form){
        var $form = $(form);
        $.ajax({
          url: $form.attr("action"),
          type: $form.attr("method"),
          dataType: "JSON",
          data: $form.serialize(),
          success: function(data){
            if(data.code){
              location.href = data["url"];
            }else{
              alert(data["msg"]);
            }
          }, error: function () {
            alert("数据执行错误！");
          }
        });
      }
    });
  </script>
{/block}